<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>极客官网汽车换色</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        img{

            object-fit: cover;
            user-select: none;
        }
        .wrap{
            position: relative;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }
        .main{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 0;
        }
        .main img{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }
        .main img:first-of-type{
           z-index: 1;
        }
        .tabs{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 6%;
            display: flex;
            /*flex-direction: column;*/
            align-items: center;
            justify-content: center;
            gap: 10px;
            z-index:1;
        }
        .tabs div{
            cursor: pointer;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
        }
        .tabs div img{
            height: 100%;
            width: 100%;
        }

    </style>
</head>
<body>
    <div class="wrap">
        <!-- 车库图片 -->
        <div class="main">
            <img src="./img/ap_bg_1.webp" alt="">
            <img src="./img/ap_bg_2.webp" alt="">
            <img src="./img/ap_bg_3.webp" alt="">
            <img src="./img/ap_bg_4.webp" alt="">
            <img src="./img/ap_bg_5.webp" alt="">
            <img src="./img/ap_bg_6.webp" alt="">
        </div>
        <!-- 车按钮 -->
        <div class="tabs">
            <div> <img src="./img/ap_btn_1.webp" alt=""></div>
            <div> <img src="./img/ap_btn_2.webp" alt=""></div>
            <div> <img src="./img/ap_btn_3.webp" alt=""></div>
            <div> <img src="./img/ap_btn_4.webp" alt=""></div>
            <div> <img src="./img/ap_btn_5.webp" alt=""></div>
            <div> <img src="./img/ap_btn_6.webp" alt=""></div>
        </div>
    </div>
</body>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>-->
<script src="./js/gsap.min.js"></script>
<script>
    //1．获取main里面的所有图片
    const mainImg = document.querySelectorAll( '.main img ')
    //2．获取tabs里面的所有li
    const tabsLi = document.querySelectorAll( '.tabs div')
    // 3．声明一个变量，用来记录当前显示的图片的索引
    let i = 1

    let indexli = -1//用来记录当前点击的是哪一个Li

    //4、遍历tabsLi
    tabsLi.forEach((item,index) =>{
        //5．给每一个Li添加点击事件
        item.addEventListener('click',()=>{
            // 如果索引号相同，就不执行下面的代码
            if (index === indexli) return
            //对应的汽车图片zindex提高
            mainImg[index].style.zIndex = ++i
            //对应的汽车图片从右边进入
            gsap.fromTo(mainImg[index],
                { 'clip-path': 'polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)'},
                { duration:1,'clip-path':'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)'}
            )

            indexli = index //把当前点击的索引赋值给indexli

        })
    })

    //添加防止多次点击效果




</script>
</html>
